<template>
	<view class="main">
    <u-steps :current="step" activeColor="#6072FF">
      <u-steps-item v-for="(item, index) in list" :key="index" iconSize="26rpx"/>
    </u-steps>

    <view class="title-list u-flex u-row-around">
      <view class="title-item" v-for="(item, index) of list" :key="index"
            :class="step >= index ? 'title-item-underway' : 'title-item-not-implemented'">{{item}}</view>
    </view>
	</view>
</template>

<script>
	export default {
		name:"qualification-add-step",
		data() {
			return {
				list: [
          '结算类型',
          '基础信息',
          '综合信息',
        ]
			};
		},
    props: {
      step: Number,
    },
    created(){
		  console.log("created")
    },
	}
</script>

<style lang="scss" scoped>
.main{
  width: 100%;
  height: 164rpx;
  background-color: $uni-bg-color;
  padding-top: 22rpx;
  margin-bottom: 20rpx;

  .title-list{
    margin-top: 18rpx;
    font-size: $f-sm;

    .title-item-underway{
      color: $u-primary;
    }
    .title-item-not-implemented{
      color: #969799;
    }
  }
}
</style>